<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!--加载渲染，提供参数-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>登录界面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-login.css"/>

</head>
<body>
<div id="home">
    <div class="container">

                <!--头部分-->
                <div class="row header">
                    <div class="col-md-12">
                            <img src="images/header.png"/>
                    </div>
                </div>
                <!--头部分-->


                <!--登录部分：采用栅栏技术进行初步框架布局-->
                <div class="row body" id="login" style="height:700px;">
                    <div class="col-md-3"></div>

                    <div class="col-md-6">

                        <!--登录的所有控件以及文本显示区域：主要采用form-group进行内部布局-->
                        <div class="container">
                            <h1 class="h1">系统登录</h1>

                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-md-2 control-label">用&nbsp;&nbsp;&nbsp;户</label>
                                    <div class="col-md-10">
                                        <input type="text" id="username" placeholder="用 户"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">密&nbsp;&nbsp;&nbsp;码</label>
                                    <div class="col-md-10">
                                        <input type="password" id="password" placeholder="密 码"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">验证码</label>
                                    <div  class="col-md-5">
                                        <input type="text" id="valid" placeholder="验 证 码"/>
                                    </div>
                                    <div class="col-md-2">
                                        <img src="images/valid.png"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-6 col-sm-offset-2 ">
                                        <button type="submit" class="btn btn-default"><a href="index.html">确定</a></button>
                                        <button type="button" class="btn btn-default" >取消</button>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <!--登录的所有控件以及文本显示区域：主要采用form-group进行内部布局-->

                    </div>

                    <div class="col-md-3"></div>
                </div>
                <!--登录部分：采用栅栏技术进行初步框架布局-->



                <!--footer部分-->
                <div class="row footer" id="footer">
                    <div class="col-md-2"></div>
                    <div class="col-md-8">
                        <h3>宜&nbsp;宾&nbsp;市&nbsp;拓&nbsp;慧&nbsp;信&nbsp;息&nbsp;科&nbsp;技&nbsp;有&nbsp;限&nbsp;公&nbsp;司&nbsp;提&nbsp;供&nbsp;技&nbsp;术&nbsp;支&nbsp;持</h3>
                    </div>

                </div>
                <!--footer部分-->
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>